<script setup>
</script>
<script>
export default {
  data (){
  return {
    list: [1, 2, 3],
  }
}
}
</script>

<template>
  <h1>本地的 todo list 代办清单</h1>
  <button class="create-btn">创建</button>
  <!-- 表格 -->
  <table>
    <tbody>
        <tr style="color: #9c9899; font-weight: 700;">
            <td>内容</td>
            <td>时间</td>
            <td>操作</td>
        </tr>
        <!-- 循环列表项 -->
        <tr v-for="(item,index) in list" :key="index">
          <td>{{item}}</td>
          <td>{{item}}</td>
          <td>
            <button class="delete">删除</button>
            <button class="edit">编辑</button>
          </td>
        </tr>
    </tbody>
</table>
</template>

<style scoped>
.create-btn {
  width: 60px;
  height: 34px;
  border: 1px solid #dcdfe6;
  background-color: #fff;
  border-radius: 5px;
}

table {
  width: 100%;
}

tr {
  display: flex;
  border-bottom: 2px solid #f4f5f9;
  height: 50px;
  align-items: center;
}

td {
  flex: 1;
}

.delete, .edit {
  width: 60px;
  height: 34px;
  color: #fff;
  border-radius: 5px;
  background-color: #f56c6c;
}
.edit {
  background-color: #409eff;
}
</style>
